<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>h5</title>
        <script type='text/javascript' src='/public/js/lib/d3.min.js' chartset='utf-8'></script>
	</head>
	<body>
		<style>
			.view-box{
				width:700px;
				height:300px;
				position:relative;
				overflow:hidden;
			}
			.view-box embed{
				position:absolute;
				top:-700px;
			}
			.char-path{
				fill:#000;
			}
			.svg-iframe{
				width:890px;
				height:1710px;
				border-style:none;
				position: absolute;
				top: -656px;
			}
		</style>
        <div class="view-box">
			<iframe id="svgIframe" class="svg-iframe" src="/public/svg/module.svg"></iframe>
		</div>
		<script type="text/javascript" >
			window.onload = function(){
				var svgDoc = document.getElementById( 'svgIframe' ).contentWindow.document ;
				var path = d3.selectAll( svgDoc.querySelectorAll('.char-path') ) ;
				path.each(function(){
					var self = d3.select(this) ;
					self.style({
						'fill' : 'rgba(0,0,0,.5)' ,
						'stroke' : 'rgba(0,0,0,.1)'
					}).attr({
						'originD' : self.attr('d')
					}) ;
				}) ;
				var randomColor = function(){
					var maxInt = 155 ;
					return 'rgb(' + parseInt( Math.random() * 255 ) +
						',' + parseInt( Math.random() * 255 ) +
						',' + parseInt( Math.random() * 255 ) +  ')'
				} ;
				var time = 200 ;
				var count = 1 ;
				var changePath = function( path  ){
					var color = randomColor() ;
					if( count <= 100 ){
						count+=90 ;
					}
					path.each(function(){
						var self = d3.select(this) ;
						var newD = self.attr('originD').replace(/([a-zA-Z]|\,)([0-9\.]+)/g,function($,s1,s2){
							return s1 + ( parseFloat(s2) + ( 11 - count/10 ) * ( 0.5 - Math.random() ) ) + '';
						}) ;
						self.transition().duration(time).attr('d',newD).style({
							'fill' : color ,
							'stroke' : color
						}) ;
					}) ;
				} ;

				window.setInterval(function(){
					changePath( path  ) ;
				},time) ;
			} ;
		</script>

    </body>
</html>